<template>
  <div class="dynamic-line-container" ref="echarts_instance"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Prop, Ref, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts'
import { Getter } from 'vuex-class'
import { json2xlsx } from '@/utils/file'
interface DataType {
  meter: string
  xAxis: string[]
  pressure: number[]
  corrctedPressure: number[]
}
type EchartsOptions = echarts.EChartsOption
@Component
class DynamicLine extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  @Ref() echarts_instance!: HTMLElement
  @Prop({ required: true }) data!: DataType
  @Prop({ default: false }) isDynamic!: boolean
  chart: echarts.ECharts | null = null
  timer: NodeJS.Timer | undefined = undefined
  isTableShow: boolean = false
  dark_color: string[] = ['#09B1EC', '#28DCD0', '#FFE37E', '#FFC3CE']
  light_color: string[] = ['#82C2E6', '#28DCD0', '#FFE37E', '#F37D84']
  @Watch('theme')
  theme_handler() {
    this.initEcharts()
  }
  @Watch('data')
  data_handler(newVal: DataType) {
    const { xAxis, pressure, corrctedPressure } = newVal
    const newOption: EchartsOptions = {
      xAxis: {
        data: xAxis
      },
      series: [
        {
          data: pressure
        },
        {
          data: corrctedPressure
        }
      ]
    }
    if (this.chart) this.chart.setOption(newOption)
  }
  mounted() {
    this.initEcharts()
  }
  destroyed() {
    clearInterval(this.timer)
  }
  initEcharts() {
    const _this = this
    const { xAxis, pressure, corrctedPressure } = this.data
    const echartsOption: EchartsOptions = {
      title: {
        text: '压力记录曲线',
        textStyle: {
          color: _this.theme === 'dark' ? '#ffffff' : '#808080'
        }
      },
      tooltip: {
        trigger: 'axis',
        textStyle: {
          align: 'left'
        }
      },
      legend: {
        textStyle: {
          color: this.theme === 'dark' ? '#ffffff' : '#555555'
        }
      },
      grid: {
        left: '25',
        right: '25',
        bottom: '1%',
        containLabel: true
      },
      toolbox: {
        itemSize: 12,
        feature: {
          saveAsImage: {
            title: '',
            icon: 'path://M831.99999969,192.00000031a68.57142844,68.57142844,0,0,1,68.57142844,68.57142844v502.8571425a68.57142844,68.57142844,0,0,1-68.57142844,68.57142844H192.00000031a68.57142844,68.57142844,0,0,1-68.57142844-68.57142844V260.57142875a68.57142844,68.57142844,0,0,1,68.57142844-68.57142844h639.99999938z,m0,68.57142844H192.00000031v502.8571425h639.99999938V260.57142875z,m-352.36571438,157.55428594l113.14285782,113.14285687,48.45714281-48.48,161.64571406,161.59999969-48.48,48.50285719-113.14285687-113.14285688-48.50285719,48.50285719-113.14285781-113.14285688-210.10285688,210.10285688-48.48-48.45714281,258.60571406-258.62857125zM717.71428531,306.28571469a45.71428594,45.71428594,0,1,1,0,91.42857093,45.71428594,45.71428594,0,0,1,0-91.42857093z',
            iconStyle: {
              color: this.theme === 'dark' ? '#ffffff' : '#555555',
              borderWidth: 0
            }
          },
          myDownload: {
            show: true,
            title: '',
            icon: 'path://M427.968,192v644.202667l-0.810667,5.781333c-1.152,7.210667-2.304,8.704-8.64,17.002667l-7.168,3.925333c-15.914667,8.490667-18.282667,7.168-38.4-3.925333L138.666667,624.533333l45.269333-45.226666,180.032,180.138666V192h64zM842.666667,714.666667v64h-320v-64h320z,m-64-149.333334v64h-256v-64h256z,m-64-149.333333v64h-192v-64h192z,m-64-149.333333v64h-128v-64h128z',
            iconStyle: {
              color: this.theme === 'dark' ? '#ffffff' : '#555555',
              borderWidth: 0
            },
            onclick: function () {
              _this.downloadAsExcel()
            }
          },
          myTableView: {
            show: true,
            title: '',
            icon: !_this.isTableShow
              ? 'M786.645333,181.418667l45.269334,45.269333-573.226667,573.226667-45.269333-45.269334,573.226666-573.226666z,m-18.794666,167.637333c36.138667,34.56,71.146667,76.949333,105.024,127.146667a64,64,0,0,1,2.410666,67.712l-2.410666,3.882666-6.058667,8.853334C759.786667,711.765333,641.493333,789.333333,512,789.333333c-51.136,0-100.501333-12.096-148.138667-36.266666l48.213334-48.213334c32.768,13.738667,66.069333,20.48,99.925333,20.48,105.770667,0,206.037333-65.749333,301.952-204.757333l5.866667-8.576-5.888-8.597333c-29.994667-43.477333-60.416-79.786667-91.306667-109.12l45.226667-45.226667zM512,234.666667c45.013333,0,88.64,9.365333,130.944,28.096l-49.408,49.429333A253.226667,253.226667,0,0,0,512,298.666667c-105.770667,0-206.037333,65.749333-301.952,204.757333L204.181333,512l5.888,8.597333c25.856,37.461333,52.010667,69.589333,78.506667,96.554667l-45.205333,45.205333c-31.616-32.106667-62.378667-70.293333-92.245334-114.56a64,64,0,0,1-2.410666-67.712l2.410666-3.882666,6.058667-8.853334C264.213333,312.234667,382.506667,234.666667,512,234.666667z,m133.696,236.586666a141.482667,141.482667,0,0,1-180.074667,180.074667l56.96-56.96a77.525333,77.525333,0,0,0,66.176-66.176l56.938667-56.96zM512,376.128c5.610667,0,11.157333,0.32,16.597333,0.96l-157.098666,157.12A141.482667,141.482667,0,0,1,512,376.149333z'
              : 'path://M512,234.666667c131.946667,0,252.245333,80.512,360.874667,241.536a64,64,0,0,1,2.410666,67.712l-2.410666,3.882666-6.058667,8.853334C759.786667,711.765333,641.493333,789.333333,512,789.333333c-131.946667,0-252.245333-80.512-360.874667-241.536a64,64,0,0,1-2.410666-67.712l2.410666-3.882666,6.058667-8.853334C264.213333,312.234667,382.506667,234.666667,512,234.666667z,m0,64c-105.770667,0-206.037333,65.749333-301.952,204.757333L204.181333,512l5.888,8.597333C306.069333,659.648,406.314667,725.333333,512,725.333333c105.770667,0,206.037333-65.749333,301.952-204.757333l5.866667-8.576-5.888-8.597333C717.930667,364.352,617.685333,298.666667,512,298.666667z,m0,77.482666a141.482667,141.482667,0,1,1,0,282.944,141.482667,141.482667,0,0,1,0-282.944z,m0,64a77.482667,77.482667,0,1,0,0,154.944,77.482667,77.482667,0,0,0,0-154.944z',
            iconStyle: {
              color: this.theme === 'dark' ? '#ffffff' : '#555555',
              borderWidth: 0
            },
            onclick: function () {
              _this.handleTableOpen()
            }
          }
        },
        iconStyle: {
          color: this.theme === 'dark' ? '#ffffff' : '#555555'
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxis
      },
      yAxis: {
        type: 'value',
        min: function (value) {
          return Math.round((value.min - 1000) / 1000) * 1000
        }
      },
      series: [
        {
          name: '压力',
          type: 'line',
          stack: 'press',
          data: pressure,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ],
            label: {
              color: _this.theme === 'dark' ? '#ffffff' : '#808080',
              position: 'insideTop'
            }
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }],
            label: {
              color: _this.theme === 'dark' ? '#ffffff' : '#808080',
              position: 'insideMiddle'
            }
          }
        },
        {
          name: '修正压力',
          type: 'line',
          stack: 'corrected',
          data: corrctedPressure,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ],
            label: {
              color: _this.theme === 'dark' ? '#ffffff' : '#808080',
              position: 'insideTop'
            }
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }],
            label: {
              color: _this.theme === 'dark' ? '#ffffff' : '#808080',
              position: 'insideMiddle'
            }
          }
        }
      ],
      color: this.theme === 'dark' ? this.dark_color : this.light_color,
      textStyle: {
        color: this.theme === 'dark' ? '#ffffff' : '#555555'
      }
    }
    this.chart = echarts.init(this.echarts_instance)
    this.chart.setOption(echartsOption)
    this.chart.resize()
    window.addEventListener('resize', () => {
      if (this.chart) this.chart.resize()
    })
  }
  downloadAsExcel() {
    const { meter, xAxis, pressure, corrctedPressure } = this.data
    const xlsxData = xAxis.map((date, index) => {
      return {
        序号: index + 1,
        出厂编号: meter,
        时间: date,
        压力: pressure[index],
        修正压力: corrctedPressure[index]
      }
    })
    json2xlsx(xlsxData, meter + '气密性数据', 'Sheet1')
  }
  @Emit('onTableOpenChange')
  handleTableOpen() {
    this.isTableShow = !this.isTableShow
    if (this.chart) {
      const option: EchartsOptions = {
        toolbox: {
          feature: {
            myTableView: {
              icon: !this.isTableShow
                ? 'M786.645333,181.418667l45.269334,45.269333-573.226667,573.226667-45.269333-45.269334,573.226666-573.226666z,m-18.794666,167.637333c36.138667,34.56,71.146667,76.949333,105.024,127.146667a64,64,0,0,1,2.410666,67.712l-2.410666,3.882666-6.058667,8.853334C759.786667,711.765333,641.493333,789.333333,512,789.333333c-51.136,0-100.501333-12.096-148.138667-36.266666l48.213334-48.213334c32.768,13.738667,66.069333,20.48,99.925333,20.48,105.770667,0,206.037333-65.749333,301.952-204.757333l5.866667-8.576-5.888-8.597333c-29.994667-43.477333-60.416-79.786667-91.306667-109.12l45.226667-45.226667zM512,234.666667c45.013333,0,88.64,9.365333,130.944,28.096l-49.408,49.429333A253.226667,253.226667,0,0,0,512,298.666667c-105.770667,0-206.037333,65.749333-301.952,204.757333L204.181333,512l5.888,8.597333c25.856,37.461333,52.010667,69.589333,78.506667,96.554667l-45.205333,45.205333c-31.616-32.106667-62.378667-70.293333-92.245334-114.56a64,64,0,0,1-2.410666-67.712l2.410666-3.882666,6.058667-8.853334C264.213333,312.234667,382.506667,234.666667,512,234.666667z,m133.696,236.586666a141.482667,141.482667,0,0,1-180.074667,180.074667l56.96-56.96a77.525333,77.525333,0,0,0,66.176-66.176l56.938667-56.96zM512,376.128c5.610667,0,11.157333,0.32,16.597333,0.96l-157.098666,157.12A141.482667,141.482667,0,0,1,512,376.149333z'
                : 'path://M512,234.666667c131.946667,0,252.245333,80.512,360.874667,241.536a64,64,0,0,1,2.410666,67.712l-2.410666,3.882666-6.058667,8.853334C759.786667,711.765333,641.493333,789.333333,512,789.333333c-131.946667,0-252.245333-80.512-360.874667-241.536a64,64,0,0,1-2.410666-67.712l2.410666-3.882666,6.058667-8.853334C264.213333,312.234667,382.506667,234.666667,512,234.666667z,m0,64c-105.770667,0-206.037333,65.749333-301.952,204.757333L204.181333,512l5.888,8.597333C306.069333,659.648,406.314667,725.333333,512,725.333333c105.770667,0,206.037333-65.749333,301.952-204.757333l5.866667-8.576-5.888-8.597333C717.930667,364.352,617.685333,298.666667,512,298.666667z,m0,77.482666a141.482667,141.482667,0,1,1,0,282.944,141.482667,141.482667,0,0,1,0-282.944z,m0,64a77.482667,77.482667,0,1,0,0,154.944,77.482667,77.482667,0,0,0,0-154.944z'
            }
          }
        }
      }
      this.chart.setOption(option)
    }
    return
  }
}
export default DynamicLine
</script>

<style lang="less" scoped>
.dynamic-line-container {
  width: 100%;
  height: 100%;
}
</style>
